<template>
  <div class="max-w-4xl mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">URL 编解码工具</h2>
      
      <!-- 输入区域 -->
      <div class="mb-6">
        <textarea
          v-model="inputText"
          :placeholder="mode === 'encode' ? '请输入要编码的URL...' : '请输入要解码的URL...'"
          rows="6"
          class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none font-mono"
        ></textarea>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-wrap gap-4 mb-6">
        <div class="flex rounded-lg overflow-hidden">
          <button
            @click="mode = 'encode'"
            :class="[
              'px-4 py-2 font-medium transition-colors',
              mode === 'encode'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            ]"
          >
            编码
          </button>
          <button
            @click="mode = 'decode'"
            :class="[
              'px-4 py-2 font-medium transition-colors',
              mode === 'decode'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            ]"
          >
            解码
          </button>
        </div>
        <button
          @click="convert"
          class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors"
        >
          转换
        </button>
      </div>

      <!-- 编码选项 -->
      <div v-if="mode === 'encode'" class="mb-6">
        <div class="flex flex-wrap gap-4">
          <label class="flex items-center space-x-2">
            <input
              type="radio"
              v-model="encodeMode"
              value="component"
              class="w-4 h-4 text-blue-500"
            />
            <span class="text-gray-700 dark:text-gray-300">encodeURIComponent</span>
          </label>
          <label class="flex items-center space-x-2">
            <input
              type="radio"
              v-model="encodeMode"
              value="uri"
              class="w-4 h-4 text-blue-500"
            />
            <span class="text-gray-700 dark:text-gray-300">encodeURI</span>
          </label>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <p>- encodeURIComponent：编码所有特殊字符，包括 /?=&</p>
          <p>- encodeURI：保留 URL 中的功能字符，如 /?=&</p>
        </div>
      </div>

      <!-- 结果区域 -->
      <div v-if="outputText || errorMessage" class="space-y-4">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">转换结果：</h3>
          <button
            v-if="outputText"
            @click="copyToClipboard"
            class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2"
            :title="copied ? '已复制！' : '复制到剪贴板'"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
            </svg>
            <span>{{ copied ? '已复制' : '复制' }}</span>
          </button>
        </div>
        <div 
          v-if="errorMessage" 
          class="w-full p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400"
        >
          {{ errorMessage }}
        </div>
        <pre
          v-if="outputText"
          class="w-full p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 overflow-x-auto font-mono"
        >{{ outputText }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputText = ref('');
const outputText = ref('');
const errorMessage = ref('');
const copied = ref(false);
const mode = ref<'encode' | 'decode'>('encode');
const encodeMode = ref<'component' | 'uri'>('component');

const convert = () => {
  if (!inputText.value) {
    errorMessage.value = '请输入要转换的文本';
    outputText.value = '';
    return;
  }

  try {
    if (mode.value === 'encode') {
      outputText.value = encodeMode.value === 'component' 
        ? encodeURIComponent(inputText.value)
        : encodeURI(inputText.value);
    } else {
      outputText.value = decodeURIComponent(inputText.value);
    }
    errorMessage.value = '';
  } catch (err) {
    errorMessage.value = mode.value === 'encode' 
      ? '编码失败，请检查输入文本' 
      : '解码失败，请确保输入的是有效的编码文本';
    outputText.value = '';
  }
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    console.error('复制失败:', err);
  }
};
</script> 